<template>
	<view class="charts">
		<f2 :init="initChart" :charts="chartCopyData"/>
	</view>
</template>

<script>
	import f2 from '@/components/i-uni-f2/f2.vue'
	export default {
		name: 'ChartsuperBar',
		props: {
			chartData: Object
		},
		data() {
			return {
			};
		},
		computed: {
			chartCopyData() {
				return this.chartData.data;
			}
		},
		components:{
			f2
		},
		created() {
		},
		methods: {
			initChart(F2, config) {
				const chart = new F2.Chart(config)
				chart.source(this.chartData.data);
				
				chart.tooltip({
					showTitle: true,
					background: {
					  radius: 4,
					  fill: '#ffffff',
					  padding: [ 6, 10 ],
					  shadowColor: 'rgba(0, 0, 0, 0.2)',
					  shadowBlur: 20
					},
					titleStyle: {
					  fontSize: 14,
					  fill: '#555555',
					  textAlign: 'start',
					  textBaseline: 'top'
					},
					nameStyle: {
					  fontSize: 14,
					  fill: '#555555',
					  textAlign: 'start',
					  textBaseline: 'middle'
					},
					valueStyle: {
					  fontSize: 14,
					  fill: '#555555',
					  textAlign: 'start',
					  textBaseline: 'middle'
					},
					onShow:(obj) => {
						obj.items[0].name = this.chartData.name;
						obj.items[0].value += this.chartData.unit;
					}
				});
				chart.axis(this.chartData.x, {
					tickLine: {
						lineWidth: 1,
						stroke: '#555555',
						length: 5,
						alignTick: false
					},
					line: {
					    lineWidth: 1,
					    stroke: '#555555',
					    top: true, // 展示在最上层
					},
					label: {
						fill: '#555555'
					}  
				});
				chart.axis(this.chartData.y, {
					grid: null,
					label: {
						fill: '#555555'
					}  
				});
				chart.interval().shape('rect').position(this.chartData.x + '*' + this.chartData.y).color('name', [this.chartData.color]).size(20);
				chart.legend('name',{
					position: 'top',
					align:'center',
					  marker:(x, y, r, ctx) => {
					    ctx.lineWidth = 10;
						ctx.strokeStyle = this.chartData.color;
					    ctx.moveTo(x - 20, y);
					    ctx.lineTo(x , y);
					    ctx.stroke();
					    ctx.fill();
					  }
				 });
				chart.render();
				return chart
			}
		}
	}
</script>

<style scoped>
	.charts {
			width: 100%;
			height: 100%;
		}
</style>
